import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import Nabar from '../../conpoment/Nabar';
import styles from './index.module.css';

// 取号详情数据接口
interface NumberDetailData {
  doctorName: string;
  doctorTitle: string;
  department: string;
  hospital: string;
  patientName: string;
  appointmentNumber: string;
  appointmentTime: string;
  timeSlot: string;
  consultationLocation: string;
  doctorAvatar?: string;
}

function Index() {
  const [isRetrieving, setIsRetrieving] = useState(false);
  const navigate = useNavigate();

  // 模拟取号详情数据
  const numberDetail: NumberDetailData = {
    doctorName: '刘医生',
    doctorTitle: '主任医师',
    department: '门诊外一科',
    hospital: '四川省保健院南苑',
    patientName: '王小柯',
    appointmentNumber: '20200101020',
    appointmentTime: '2020-01-27 08:30-12:00',
    timeSlot: '上午',
    consultationLocation: '南苑门诊大楼二楼520诊室',
    doctorAvatar: '👨‍⚕️'
  };

  const handleRetrieveNumber = () => {
    setIsRetrieving(true);
    console.log('开始取号...');
    
    // 模拟取号过程
    setTimeout(() => {
      // 生成随机排队号
      const queueNumber = Math.floor(Math.random() * 50) + 1;
      
      setIsRetrieving(false);
      console.log('取号成功！排队号:', queueNumber);
      
      // 取号成功后跳转到科室选择页面，并传递取号数据
      const retrievedData = {
        ...numberDetail,
        queueNumber: queueNumber,
        appointmentNumber: numberDetail.appointmentNumber,
        consultationLocation: numberDetail.consultationLocation
      };
      
      // 将数据存储到sessionStorage中
      sessionStorage.setItem('retrievedAppointment', JSON.stringify(retrievedData));
      
      navigate('/self-service-department');
    }, 2000);
  };


  return (
    <div className={styles.container}>
      {/* 顶部导航栏 */}
      <Nabar title="取号详情" sticky={false} />
      
      {/* 医生和预约信息卡片 */}
      <div className={styles.detailCard}>
        {/* 医生信息 */}
        <div className={styles.doctorSection}>
          <div className={styles.doctorAvatar}>
            {numberDetail.doctorAvatar}
          </div>
          <div className={styles.doctorInfo}>
            <div className={styles.doctorName}>{numberDetail.doctorName}</div>
            <div className={styles.doctorTitle}>{numberDetail.doctorTitle}</div>
            <div className={styles.department}>{numberDetail.department}</div>
            <div className={styles.hospital}>{numberDetail.hospital}</div>
          </div>
        </div>

        {/* 患者和预约详情 */}
        <div className={styles.appointmentSection}>
          <div className={styles.detailRow}>
            <span className={styles.label}>就诊人</span>
            <span className={styles.value}>{numberDetail.patientName}</span>
          </div>
          <div className={styles.detailRow}>
            <span className={styles.label}>预约号</span>
            <span className={styles.value}>{numberDetail.appointmentNumber}</span>
          </div>
          <div className={styles.detailRow}>
            <span className={styles.label}>预约时间</span>
            <span className={styles.value}>
              {numberDetail.appointmentTime} ({numberDetail.timeSlot})
            </span>
          </div>
          <div className={styles.detailRow}>
            <span className={styles.label}>就诊地点</span>
            <span className={styles.value}>{numberDetail.consultationLocation}</span>
          </div>
        </div>
        
      {/* 取号按钮 */}
      <div className={styles.actionSection}>
        <button 
          className={`${styles.retrieveButton} ${isRetrieving ? styles.retrieving : ''}`}
          onClick={handleRetrieveNumber}
          disabled={isRetrieving}
        >
          {isRetrieving ? (
            <div className={styles.loadingContent}>
              <div className={styles.loadingSpinner}></div>
              <span>取号中...</span>
            </div>
          ) : (
            '取号'
          )}
        </button>
      </div>

      {/* 位置信息 */}
      <div className={styles.locationSection}>
        <div className={styles.locationText}>当前范围可取号</div>
        <div className={styles.address}>
          <span className={styles.locationIcon}>📍</span>
          <span className={styles.addressText}>四川省成都市锦江区画溪路666号</span>
        </div>
      </div>
      </div>

      {/* 验证中弹窗 */}
      {isRetrieving && (
        <div className={styles.verificationModal}>
          <div className={styles.modalContent}>
            <div className={styles.modalSpinner}></div>
            <div className={styles.modalText}>验证中...</div>
          </div>
        </div>
      )}

    </div>
  );
}

export default Index;